/**
 * @modal: 订单商品明细
 */
import {Button, Form, Row, Col, Dropdown, Menu, Space, Table, Input, Popconfirm, message, Image} from 'antd';
import React, { useState, useEffect, useRef, useContext, useMemo } from 'react';
import { CommonModal } from '@/pages/OrderModule/common/components/CommonModal';
import GoodsSelectModal from '@/pages/OrderModule/common/bizcomponents/GoodsSelectModal';
import { NumText } from '@/pages/OrderModule/common/components/CommonText/components/NumText';
import Typography from '@/pages/OrderModule/common/components/Typography';
import Style from './index.module.less';
import { GoodField, GoodHead } from '@/views/components/TableGoods';
import {formatAmount, formatSysImg} from '@/utils/utils';
import orderUtils from '@/pages/OrderModule/common/utils/order';
import styles from './index.module.less';
import PackageAndGiveawayTabs from '@/pages/OrderModule/common/bizcomponents/PackageAndGiveawayTabs';
import { DownOutlined, SmileOutlined } from '@ant-design/icons'
import GoodsMatchDrawer from "@/pages/GoodsModule/systemGoods/components/Actions/GoodsMatchDrawer/index";
import {
    useGoodsColumns
} from '@/pages/OrderModule/orderList/components/Actions/common/OrderDetailModal/components/DetailGoods/goodsColumns.jsx';
import { relieveMatch, singleUpdateOrderGoods, sureUpdateOrderGoods, setBatchPackageGiftOp, modifyGoodsAttributeOp } from '@/pages/OrderModule/orderList/services.js';
import ConfirmPayModal from '@/pages/OrderModule/orderList/components/Actions/common/components/ConfirmPayModal.jsx';
import {searchOrderByIds} from '@/pages/OrderModule/orderList/components/OrderList/services.js';
import EidtContent from '@/pages/OrderModule/orderList/components/Actions/common/OrderItemDetailModal/EidtContent.jsx';
import CommonTag from '@/components/CommonTag/index.jsx';
import {payMethMap} from '@/utils/config.js';
const payMethMaps = {
    1:'余额',
    2: '支付宝',
    3: '转账充值',
    4: '微信',
    5: '优惠补助',
    6: '账期',
}
const EditableContext = React.createContext(null);
const EmptyContent = () => {
    return <div style={{width:'100%', height:'100%', display:'flex', justifyContent:'center', alignItems:'center'}}>/</div>
}
const EditableRow = ({ index, ...props }) => {
    const [form] = Form.useForm();
    return (
        <Form form={form} component={false}>
            <EditableContext.Provider value={form}>
                <tr {...props} />
            </EditableContext.Provider>
        </Form>
    );
};

const EditableCell = ({
                          title,
                          editable,
                          children,
                          dataIndex,
                          record,
                          handleSave,
                          promiseFunc,
                          ...restProps
                      }) => {
    const [editing, setEditing] = useState(false);
    const inputRef = useRef(null);
    const form = useContext(EditableContext);
    useEffect(() => {
        if (editing) {
            inputRef.current.focus();
        }
    }, [editing]);
    const toggleEdit = () => {
        setEditing(!editing);
        form.setFieldsValue({
            [dataIndex]: record[dataIndex],
        });
    };

    const formatCount = (value) => {
        let goodsNum = parseInt(value) || 1;
        goodsNum = Math.max(1, goodsNum);
        goodsNum = Math.min(999999, goodsNum);
        return goodsNum;
    }

    //单元格保存提交
    const save = async () => {
        try {
            const values = await form.validateFields(), field = Object.keys(values)[0];
            toggleEdit();
            if(record[field] == values[field]) return;
            const combineObj =  { ...record, ...values},
                rowData = { ...combineObj, goodsNum: formatCount(combineObj.goodsNum) };
            const { orderId, id, sysGoodsId, skuCode: sysSkuCode, goodsNum, goodsName: sysGoodsName, } = rowData;
            if(!sysGoodsName){
                return message.info('商品名称不能为空')
            }
            if(rowData.orderGoodsType == 'goods'){//商品
                if(field == 'sysGoodsName'){//名称
                    promiseFunc(1, {
                        ...values,
                        orderGoodsId: id
                    })
                }else{//数量
                    promiseFunc(2, {
                        updateOrderGoodsList: [{
                            goodsNum,
                            id,
                            sysGoodsName,
                            sysGoodsId,
                            sysSkuCode
                        }]
                    })
                }
            }else if(field == 'goodsNum'){
                promiseFunc(3, {
                    orderAccessoryList: [{
                        goodsNum,
                        id
                    }]
                })
            }
        } catch (errInfo) {
            console.log('Save failed:', errInfo);
        }
    };
    let childNode = children;
    if (editable) {
        childNode = editing ? (
            <Form.Item
                style={{
                    margin: 0,
                }}
                name={dataIndex}
            >
                <Input ref={inputRef} onPressEnter={save} onBlur={save} />
            </Form.Item>
        ) : (
            <div
                className="editable-cell-value-wrap"
                style={{
                    paddingRight: 24,
                }}
                onClick={toggleEdit}
            >
                {children}
            </div>
        );
    }
    return <td {...restProps}>{childNode}</td>;
};

function OrderItemDetailModal({ records }) {
    const { goodsColumns } = useGoodsColumns();

    const [loading, setLoading] = useState(false);
    const [data, setData] = useState([]);
    const [amountObj, setAmountObj] = useState(null);
    const [modalStatus, setModal] = useState(false);
    const [rows, setRows] = useState([]);

    const stageParams = useRef({});
    const isEdit = useRef(false);

    const { type: orderType, state: orderState, payState, payMeth, goodsList = [], accessoryList = [] } = records;

    useEffect(()=>{
        getOrderGoodsFunc();
    }, [])

    const statisticsObj = useMemo(() => {
        let totalKind = 0, totalCount = 0;
        data.map(item=>{
            if(item.orderGoodsType == 'goods'){
                totalKind += 1;
                totalCount += (item.goodsNum || 1);
            }
        })
        return { totalKind, totalCount }
    }, [data])

    const getOrderGoodsFunc = async () => {
        setLoading(true);
        const { data: newData, success} = await searchOrderByIds([records.id]);
        setLoading(false);
        if(success && newData){
            const arr = [];
            newData.map(item=>{
                const { goodsList: orderGoodsVOList = [], accessoryList: orderAccessoryVOList = [] } = item;
                orderGoodsVOList.map(item=>{
                    //todo库存字段
                    arr.push({
                        ...item,
                        orderId: records.id,
                        orderGoodsType: 'goods',
                        storeGoodsPrice: item.goodsPrice,
                    })
                })
                orderAccessoryVOList.map(item=>{
                    arr.push({
                        ...item,
                        orderGoodsType: item.type ? 'gift' : 'package',
                        storeGoodsPrice: item.goodsPrice,
                    })
                })
            })
            setData(orderUtils.sortGoodsByGoodsType(arr));
        }
    }

    const handleSave = (row) => {
        const newData = [...data];
        const index = newData.findIndex((item) => row.id === item.id);
        const item = newData[index];
        newData.splice(index, 1, {
            ...item,
            ...row,
        });
        setData(newData);
    };

    const components = {
        body: {
            row: EditableRow,
            cell: EditableCell,
        },
    };

    //解除匹配
    const handleRelieveMatch = async (obj, index) => {
        setLoading(true);
        const { success, msg } = await relieveMatch({
            orderIds: [records.id],
            cancelGoodsMatchList: [{
                supplierSkuId: obj.storeId,
                sysGoodsId: obj.sysGoodsId
            }]
        });
        setLoading(false);
        if(success){
            message.success(msg);
            data[index]['isMatch'] = 0;
            setData([...data]);
        }
    }

    //编辑商品
    const handleUpdateGoods = async (type, index, list = []) => {
        const params = {
            orderId: records.id
        };
        if(type == 'add'){
            params.addOrderGoodsList = list.map(item=>{
                const { id, goodsNum, skuName:sysGoodsName, skuCode: sysSkuCode } = item;
                return ({
                    goodsNum,
                    id,
                    sysGoodsId: id,
                    sysGoodsName,
                    sysSkuCode
                })
            });
        }else if(type == 'delete'){
            if(data[index].orderGoodsType == 'goods'){
                const list = data.filter(item=>item.orderGoodsType == 'goods');
                if(list?.length == 1){
                    return message.info('该商品为最后一个商品，不能删除');
                }
            }
            params.delOrderGoodsId = [data[index].id];
        }else{//换
            const { id, goodsNum, skuName: sysGoodsName, skuCode: sysSkuCode } = list[0] || {};
            params.changeNewOrderGoodsList = [{
                sysGoodsName,
                sysSkuCode,
                sysGoodsId: id,
                goodsNum: goodsNum || 1,
                originalId: data[index].id,
            }];
        }
        setLoading(true);
        const { data: res, success, msg } = await singleUpdateOrderGoods(params);
        setLoading(false);
        if(success && res){
            const { resultHandleType, payAmount, tradeNo } = res;
            stageParams.current = { ...params, tradeNo };
            if(resultHandleType == 1){
                isEdit.current = true;
                message.success(msg);
                getOrderGoodsFunc();
            }else{
                setAmountObj(payAmount);
            }
        }
    }

    //单元格修改
    const promiseFunc = async (type, params) => {
        if(type == 1 || type == 2){
            params.orderId = records.id;
        }else{
            params.orderIds = [records.id];
        }
        setLoading(true);
        let request;
        if(type == 1){
            request = await modifyGoodsAttributeOp(params);
        }else if(type == 2){
            request = await singleUpdateOrderGoods(params);
        }else{
            params.setType = 5;
            request = await setBatchPackageGiftOp(params);
        }
        const { data: res, success, msg } = request;
        setLoading(false);
        if(success && res){
            if(type == 1 || type == 3){
                isEdit.current = true;
                message.success(msg);
                getOrderGoodsFunc();
                return
            }
            const { resultHandleType, payAmount, tradeNo } = res;
            stageParams.current = { ...params, tradeNo };
            if(resultHandleType == 1){
                isEdit.current = true;
                message.success(msg);
                getOrderGoodsFunc();
            }else{
                setAmountObj(payAmount);
            }
        }
    }

    //确定修改
    const handleSureModify = async (password) => {
        setLoading(true);
        const { msg, success} = await sureUpdateOrderGoods({
            password,
            ...stageParams.current,
            index: undefined,
            newData: undefined
        });
        setLoading(false);
        if(success){
            isEdit.current = true;
            message.success(msg);
            getOrderGoodsFunc();
            setAmountObj(undefined);
        }
    }

    //更新包材
    const handleUpdatePackage = async (type, index, list = []) => {
        const params = {
            orderIds: [records.id],
            orderAccessoryList: []
        }
        if(type == 'add'){
            params.addStrategy = 3;
            params.setType = 1;
            list.map(item=>{
                params.orderAccessoryList.push({
                    ...item,
                    type: item.orderGoodsType == 'package' ? 0 : 1,
                    goodsNum: item.goodsNum || 1
                })
            })
        }else if(type == 'delete'){
            const obj = data[index] || {};
            params.setType = obj.orderGoodsType == 'package' ? 3 : 4;
            params.orderAccessoryList.push({
                id: data[index]?.id
            })
        }else{
            params.setType = 5;
            params.orderAccessoryList.push({
                id: data[index]?.id
            })
        }
        const { msg, success } = await setBatchPackageGiftOp(params);
        if(success){
            isEdit.current = true;
            message.success(msg);
            getOrderGoodsFunc();
            setModal(false);
        }
    }

    const defaultColumns = [
        {
            title: '商品',
            dataIndex: 'sysGoodsName',
            width: 260,
            render(value, el) {
                const textMap = {
                    gift: `【赠品】`,
                    package: `【包装】`
                }
                const { goodsImage, goodsName, goodsSpec, storeName, storeId, size, type, id, orderGoodsType, isSysComposeGoods, refundType, takeGoodsState } = el;
                return <div style={{display:'flex'}}>
                    <Image src={formatSysImg(goodsImage, storeId, size)} width={48} height={48} style={{borderRadius:'6px'}}/>
                    <div style={{flex: 1, marginLeft:'8px'}}>
                        <div className='textOverflowMultiTwo'>
                            <span style={{color:'#0068FF'}}>【{storeName || '无供应商'}】</span>
                            { orderGoodsType == 'goods' ? <EidtContent textNode={goodsName} handleOk={(sysGoodsName)=>promiseFunc(1, {sysGoodsName, orderGoodsId: id})} />
                                : <span>{goodsName}{textMap[el.orderGoodsType] || ''}</span>}
                        </div>
                        <div style={{display:'flex', justifyContent:'space-between'}}>
                            <span style={{flex: 1, color: '#7C7E82'}}>{goodsSpec}</span>
                            {type == 3 && <span style={{color:'#00BC75'}}>手工添加</span>}
                            {type == 4 && <span style={{color:'#00BC75'}}>手工换货</span>}
                        </div>
                        {!!isSysComposeGoods && <CommonTag type='zuhe' />}
                        {refundType == 1 && <CommonTag type='jintuikuan' />}
                        {refundType == 2 && <CommonTag type='tuihuotuikuan' />}
                        <CommonTag type={`takeGoodsState${takeGoodsState}`} />
                    </div>
                </div>
            },
        },
        {
            title: '商品编码',
            dataIndex: 'skuCode',
            width:80,
            render(text, record) {
                const value = text || record.goodsId;
                return <Typography as="s1" onClick={()=>window.open(`${GOODS_HREF}${value}`)} style={{cursor:'pointer'}}>
                    {value}
                </Typography>;
            },
        },
        {
            title: '款式编码',
            dataIndex: 'spuCode',
            width:80,
            render(value, record) {
                return <Typography as="s1">{value || record.spu}</Typography>;
            },
        },
        {
            title: '数量',
            dataIndex: 'goodsNum',
            width:70,
            editable: true,
            render(value, record) {
                return <NumText as="s1" num={value} />;
            },
        },
        {
            title: '采购价',
            dataIndex: 'storeGoodsPrice',
            width:100,
            render(value, { isVipGoods }) {
                return (<>
                    {!!value && <div className='common-color9'>￥{value}</div>}
                    {!!isVipGoods && <CommonTag type='isVipGoods' />}
                </>)
            },
        },
        {
            title: '店铺价格',
            dataIndex: 'ecGoodsPrice',
            width:80,
            render(value, record, index) {
                const { orderGoodsType } = record;
                if(orderGoodsType == 'gift' || orderGoodsType == 'package'){
                    return <EmptyContent />;
                }
                return value ? <span>￥{value}</span> : '-';
            },
        },
        {
            title: '单品重量',
            dataIndex: 'weight',
            width:80,
            render(value) {
                return value ? <NumText as="s1" suffix="kg" num={value} /> : '0';
            },
        },
        {
            title: '可用库存',
            dataIndex: 'lockStockNum',
            width:80,
            render(value, record, index) {
                const { orderGoodsType } = record;
                if(orderGoodsType == 'gift' || orderGoodsType == 'package'){
                    return <EmptyContent />;
                }
                return '0';
            },
        },
        {
            title: '支付状态',
            dataIndex: 'payMeth',
            width:110,
            render(value, { payMeth }) {
                return <>
                    <Typography as="s1">{`${payState ? '已' : '未'}支付`}</Typography>
                    {payMeth && <p>({payMethMap[payMeth]})</p>}
                </>;
            },
        },
        {
            title: '操作',
            dataIndex: 'field5',
            width:120,
            render(text, record, index) {
                const { orderGoodsType, isMatch, type } = record;
                if(![10, 30].includes(orderState) || type == 2){
                    return <EmptyContent />;
                }
                const spec = (orderState == 30 && payState && orderType == 1);

                const renderMenu = (setRows) => {
                    if(isMatch){
                        return <Menu>
                            <Menu.Item >
                                <Typography as="s1" onClick={()=>setRows([{...record, orderIds: [records.id]}])}>更换匹配</Typography>
                            </Menu.Item>
                            <Menu.Item >
                                <Popconfirm
                                    title="确认解除匹配吗?"
                                    onConfirm={() => handleRelieveMatch(record, index)}
                                ><Typography as="s1">解除匹配</Typography>
                                </Popconfirm>
                            </Menu.Item>
                        </Menu>
                    }else{
                        return <Menu>
                            <Menu.Item>
                                <Typography as="s1" onClick={()=>setRows([{...record, orderIds: [records.id]}])}>匹配商品</Typography>
                            </Menu.Item>
                            <Menu.Item >
                                <Typography as="s1">智能匹配</Typography>
                            </Menu.Item>
                        </Menu>
                    }
                }

                return (<span className="opera-span-common">
          {
              orderGoodsType == 'goods' && (<Dropdown overlay={renderMenu(setRows)} trigger='click' disabled={spec}>
                  <Button size='small'>
                      <Space>
                          {`${isMatch == 1 ? '已' : '未'}匹配`}
                          <DownOutlined />
                      </Space>
                  </Button>
              </Dropdown>)
          }

                    {
                        orderGoodsType == 'goods' && (orderState == 10 || orderState == 30) && (<GoodsSelectModal {...changeGoodsModalProps}>
                            <Button type='link' onClick={()=>{stageParams.current.index = index; setRecord(record)}} style={{marginTop:'4px'}}>
                                换商品
                            </Button>
                        </GoodsSelectModal>)
                    }

                    {
                        (spec && orderGoodsType == 'package') ? (<Button type='link' disabled={true}>删除</Button>)
                            : (<Popconfirm
                                title="确认删除该商品吗?"
                                onConfirm={() => orderGoodsType == 'goods' ? handleUpdateGoods('delete', index) : handleUpdatePackage('delete', index)}
                            >
                                <Button type='link'>删除</Button>
                            </Popconfirm>)
                    }

        </span>)
            },
        },
    ];

    const columns = defaultColumns.map((col) => {
        if (!col.editable) {
            return col;
        }
        return {
            ...col,
            onCell: (record) => ({
                record,
                editable: col.editable,
                dataIndex: col.dataIndex,
                title: col.title,
                handleSave,
                promiseFunc
            }),
        };
    });

    const summary = (pageData) => {
        // let totalBorrow = 0;
        // let totalRepayment = 0;

        // pageData.forEach(({ borrow, repayment }) => {
        //   totalBorrow += borrow;
        //   totalRepayment += repayment;
        // });

        return (
            <>
                <Table.Summary.Row className={Style.table_summary}>
                    <Table.Summary.Cell index={0}>总计</Table.Summary.Cell>
                    <Table.Summary.Cell index={1}></Table.Summary.Cell>
                    <Table.Summary.Cell index={2}></Table.Summary.Cell>
                    <Table.Summary.Cell index={3}>12</Table.Summary.Cell>
                    <Table.Summary.Cell index={4}>
                        <NumText as="s1" pre="￥" num={800} />
                    </Table.Summary.Cell>
                    <Table.Summary.Cell index={6}></Table.Summary.Cell>
                    <Table.Summary.Cell index={7}>6.001kg</Table.Summary.Cell>
                    <Table.Summary.Cell index={8}></Table.Summary.Cell>
                    <Table.Summary.Cell index={9}></Table.Summary.Cell>
                    <Table.Summary.Cell index={10}></Table.Summary.Cell>
                </Table.Summary.Row>
            </>
        );
    };

    const confirmPayModalProps = {
        amountObj,
        handleOk: handleSureModify,
        handleCancel(){
            setAmountObj(null);
        },
    }

    const selectRowKeys = useRef([]);

    const changeGoodsModalProps = {
        isSingle: true,
        submitCallback(changedArr){
            handleUpdateGoods('change', stageParams.current.index, changedArr);
        },
        setSelectedRows(){
            return []
        },
        getInputNumberValues: (value) => { }
    }

    //添加商品modal props
    const addGoodsModalProps = {
        type:2,
        submitCallback: (addArr) => {
            handleUpdateGoods('add', undefined, addArr);
            // const newArr = cloneDeep(data);
            //  addArr.map(item=>{
            //    const obj = find(newArr, ['id', item.id]);
            //    if(!obj){
            //     newArr.push(orderUtils.formatGoodsInfo(item));
            //    }
            //  })
            // setData(orderUtils.sortGoodsByGoodsType(newArr));
            // selectRowKeys.current = newArr.reduce((prev, next) => {
            //   return prev.concat(next.id);
            // }, [])
        },
        setSelectedRows: (dataSource, rowKey) => {
            const ids = selectRowKeys.current, filterIds = [];
            dataSource.map(item => {
                const id = item[rowKey];
                if (ids?.includes(id)) {
                    filterIds.push(id);
                }
            });
            return filterIds;
        },
        getInputNumberValues: (value) => { }
    }

    //关闭弹窗
    const onCancel = () => {
        if(isEdit.current){
            handleOk(1, [records.id]);
        }else{
            handleCancel();
        }
    }

    //商品匹配props
    const goodsMatchDrawerProps = {
        isSkuType: true,
        isOrderGoods: true,
        data: rows,
        onCancel(ids){
            ids?.length && (isEdit.current = true);
            setTimeout(()=>{
                getOrderGoodsFunc();
            },500)
            setRows([]);
        }
    }

    return (
        <>
            <Row style={{ marginBottom: 10 }}>
                <Col span={22}>
                    <Space>
                        { [10, 30].includes(orderState) && <GoodsSelectModal {...addGoodsModalProps}>
                            <Button size="small">
                                添加商品
                            </Button>
                        </GoodsSelectModal>}
                        {
                            [10, 30].includes(orderState) && !payState && (
                                <Button size="small" onClick={()=>setModal('addPacking')}>添加包装或赠品</Button>
                            )
                        }
                    </Space>
                </Col>
                <Col span={2}>
                    <Typography as="s1">共{statisticsObj.totalCount}件({statisticsObj.totalKind}种)</Typography>
                </Col>
            </Row>
            <Row>
                <Col span={24}  className={styles.editTableCell}>

                    <Table
                        columns={columns}
                        dataSource={data}
                        components={components}
                        pagination={false}
                        bordered
                        scroll={{ x: 1000, y: 500 }}
                        rowKey='id'
                        summary={pageData => {

                            let totalNumber = 0, totalAmount = 0, totalWeight = 0;
                            pageData.map(item => {
                                const singleNum = Number(item.goodsNum)  || 1;
                                totalNumber += singleNum;
                                totalAmount += (item.storeGoodsPrice * 1000) * singleNum;
                                totalWeight += item.weight || 0;
                            })
                            return (
                                <Table.Summary fixed>
                                    <Table.Summary.Row >
                                        <Table.Summary.Cell>总计</Table.Summary.Cell>
                                        <Table.Summary.Cell></Table.Summary.Cell>
                                        <Table.Summary.Cell></Table.Summary.Cell>
                                        <Table.Summary.Cell>{totalNumber}</Table.Summary.Cell>
                                        <Table.Summary.Cell><span className='common-color9' style={{ fontWeight: 500 }}>￥{formatAmount(totalAmount / 1000)}</span></Table.Summary.Cell>
                                        <Table.Summary.Cell></Table.Summary.Cell>
                                        <Table.Summary.Cell>{totalWeight}</Table.Summary.Cell>
                                        <Table.Summary.Cell></Table.Summary.Cell>
                                        <Table.Summary.Cell></Table.Summary.Cell>
                                        <Table.Summary.Cell></Table.Summary.Cell>
                                    </Table.Summary.Row>
                                </Table.Summary>
                            );
                        }}
                    />
                    {/* <CommonTable className={Style.order_item_table} scroll={{ y: `calc(100vh - 250px)` }} columns={goodsColumns} summary={summary} /> */}
                </Col>
            </Row>
            {amountObj && <ConfirmPayModal {...confirmPayModalProps} />}
            <CommonModal
                title= '添加包装或赠品'
                visible={modalStatus == 'addPacking'}
                width = {800}
                onOk= {()=>{
                    const addOrderGoodsList = [];
                    stageParams.current.packageSource.map(item=>{
                        addOrderGoodsList.push({
                            goodsNum: item.goodsNum || 1,
                            sysGoodsId: item.goodsId,
                            sysGoodsName: item.goodsName,
                            sysSkuCode: item.goodsId,
                        })
                    })
                    handleUpdatePackage('add', undefined, stageParams.current.packageSource)
                    //   const newArr = cloneDeep(data);
                    //   stageParams.current.packageSource.map(item=>{
                    //     const obj = find(newArr, ['goodsId', item.goodsId]);
                    //     if(!obj){
                    //       const { goodsCommonid, goodsId, goodsPrice  } = item;
                    //      newArr.push({
                    //       ...item,
                    //       goodsNum: item.goodsNum || 1,
                    //       type: item.orderGoodsType == 'package' ? 0 : 1,
                    //       goodsCode: goodsId,
                    //       amount: goodsPrice * 1000 * (item.goodsNum || 1) / 1000,
                    //       isCustom: 0,
                    //       isVipGoods: 0,
                    //       outStoreSku: goodsId,
                    //       outStoreSpu: goodsCommonid,
                    //      });
                    //     }
                    //   })
                    //  setData(orderUtils.sortGoodsByGoodsType(newArr));
                    //  setModal(false);
                }}
                onCancel={()=>setModal(false)}
            >
                <PackageAndGiveawayTabs
                    onSelectionChange={(list)=>stageParams.current.packageSource = list }
                />
            </CommonModal>
            {!!rows.length && <GoodsMatchDrawer {...goodsMatchDrawerProps} />}
        </>
    );
}

export default OrderItemDetailModal;
